import React, { useState, useEffect } from 'react';
import { Tabs, Input, InputNumber } from 'antd';
import { connect } from "react-redux";
const { TabPane } = Tabs;
import { setCurrComp } from '@/store/actions/visualdrag';
import {ChromePicker}  from 'react-color';

const Pages = ({ curComponent, curComponentIndex, dispatch }) => {
  // 是否展示边框颜色选择器
  const [isShowBorderColorBox,setIsShowBorderColorBox] = useState(false);
  // 是否展示字体颜色选择器
  const [isShowFontColorBox,setIsShowFontColorBox] = useState(false);
  
  const popover = {
    position: 'absolute',
    zIndex: '2',
  }
  const cover = {
    position: 'fixed',
    top: '0px',
    right: '0px',
    bottom: '0px',
    left: '0px',
    zIndex:10
  }

  // 组件属性值改变事件
  const changeAttr = (type, val) => {
    let data = {
      index: curComponentIndex,
      component: {
        ...curComponent,
      }
    }
  
    if (type == 'propValue') {
      data.component.propValue = val;
    } else {
      data.component.style[type] = val;
    }
    dispatch(setCurrComp(data));
  }

  return (
    <div className="attribute-box">
      <Tabs defaultActiveKey="1">
        <TabPane tab="属性" key="1">
          {
            curComponent ?
              <div className="attr-item-box">
                <div className="item">
                  <div className="label">透明度</div>
                  <div className="">
                    <InputNumber value={curComponent.style.opacity}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('opacity', e)} />
                  </div>
                </div>
                <div className="item">
                  <div className="label">X 坐标</div>
                  <div className="">
                    <InputNumber value={curComponent.style.left}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('left', e)} />
                  </div>
                </div>
                <div className="item">
                  <div className="label">Y 坐标</div>
                  <div className="">
                    <InputNumber value={curComponent.style.top}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('top', e)} />
                  </div>
                </div>
                <div className="item">
                  <div className="label">宽</div>
                  <div className="">
                    <InputNumber value={curComponent.style.width}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('width', e)} />
                  </div>
                </div>
                <div className="item">
                  <div className="label">高</div>
                  <div className="">
                    <InputNumber value={curComponent.style.height}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('height', e)} />
                  </div>
                </div>
                <div className="item inline">
                  <div className="label">边框颜色</div>
                  <div className="color-box-wrap"
                    onClick={()=>setIsShowBorderColorBox(!isShowBorderColorBox)}
                    style={{backgroundColor:curComponent.style.borderColor}}>
                  </div>
                  { isShowBorderColorBox &&
                    <div style={ popover }>
                      <div style={ cover } onClick={ ()=>setIsShowBorderColorBox(false) }/>
                      <ChromePicker width="200px"
                        zIndex='50'
                        disableAlpha={true}
                        className="color-picker-box-wrap"
                        onChange={(e)=>changeAttr('borderColor', e.hex)}
                        color={curComponent.style.borderColor} />
                    </div>
                  }
                </div>
                <div className="item inline">
                  <div className="label">字体颜色</div>
                  <div className="color-box-wrap"
                    onClick={()=>setIsShowFontColorBox(!isShowBorderColorBox)}
                    style={{backgroundColor:curComponent.style.color}}>
                  </div>
                  { isShowFontColorBox &&
                    <div style={ popover }>
                      <div style={ cover } onClick={ ()=>setIsShowFontColorBox(false) }/>
                      <ChromePicker width="200px"
                        zIndex='50'
                        disableAlpha={true}
                        className="color-picker-box-wrap"
                        onChange={(e)=>changeAttr('color', e.hex)}
                        color={curComponent.style.color} />
                    </div>
                  }
                </div>
                <div className="item">
                  <div className="label">旋转角度</div>
                  <div className="">
                    <InputNumber value={curComponent.style.rotate}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('rotate', e)} />
                  </div>
                </div>
                <div className="item">
                  <div className="label">行高</div>
                  <div className="">
                    <InputNumber value={curComponent.style.lineHeight}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('lineHeight', e)} />
                  </div>
                </div>
                <div className="item">
                  <div className="label">字间距</div>
                  <div className="">
                    <InputNumber value={curComponent.style.letterSpacing}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('letterSpacing', e)} />
                  </div>
                </div>
                <div className="item">
                  <div className="label">内容</div>
                  <div className="">
                    <Input.TextArea rows={4}
                      value={curComponent.propValue}
                      style={{ width: '100%' }}
                      onChange={(e) => changeAttr('propValue', e.target.value)} />
                  </div>
                </div>
              </div> :
              '请选择组件'
          }
        </TabPane>
        <TabPane tab="事件" key="2">
          {
            curComponent ?
              '事件' :
              '请选择组件'
          }
        </TabPane>
      </Tabs>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    ...state.VisualDrag
  };
};

export default connect(mapStateToProps)(Pages);